<template>
	<view class="recommend_box">
		<u-sticky>
			<view class="header_share w750 flex">
				<input class="uni_ipt" type="text" v-model="keyword" placeholder-style="color: #CCC;" placeholder-class="s24 f500 family" placeholder="输入下单人/手机号" />
				<image class="search_img" src="../static/search.png" mode=""></image>
				<view class="search_btn s26 f500 family txtali" @click="getList">搜索</view>
			</view>
			<view class="head_riqi_box w750 flex">
				<uni-datetime-picker type="date" :value="startDate" start="2021-3-20" end="2111-6-30" @change="change" />
				<view class="zhi_txt s26 family f500">至</view>
				<uni-datetime-picker type="date" :value="endDate" start="2021-3-20" end="2111-6-30" @change="change1" />
				<view class="shaixuan_btn s24 family f500 txtali" @click="getList">筛选</view>
			</view>
		</u-sticky>
		<view class="list_box w750" v-for="(item, index) in rebateList" :key="index">
			<view class="head_goods_detail flexjus">
				<view class="flex">
					<view class="left_img_box">
						<image class="w100 h100" :src="item.order_cover"></image>
					</view>
					<view class="center_goods_name family s26 f500">{{ item.order_goods[0].type == 'goods' ? item.order_goods[0].difference : '' }} {{ item.order_goods[0].title }}</view>
				</view>
				<view class="goods_price">
					<view class="top_price s32 family f500">
						<text class="s24">￥</text>
						{{ item.price }}
					</view>
					<view class="bot_number s22 family f500">共{{ item.goods_number }}件</view>
				</view>
			</view>
			<view class="shop_box_detail flexjus">
				<view class="left_title_name flex">
					<view class="shop_title_txt">所属店铺</view>
					<view class="shop_name_txt">
						{{ item.shop.shopname }}
					</view>
				</view>
				<view class="right_phone_icon" @click="callPhone(item.mobile)">
					<image class="w100 h100" src="/static/store/phone.png" mode=""></image>
				</view>
			</view>
			<view class="order_detail_box flexjus">
				<view class="order_left_box">
					<view class="order_left_txt_box flex">
						<view class="left_title">订单号</view>
						<view class="left_name_txt">
							{{ item.pay.order_no }}
						</view>
					</view>
					<view class="order_left_txt_box flex">
						<view class="left_title">订单时间</view>
						<view class="left_name_txt">
							{{ get_datesForDian(item.pay.createtime) }}
						</view>
					</view>
					<view class="order_left_txt_box flex">
						<view class="left_title">购买人</view>
						<view class="left_name_txt">
							{{ item.name }}
						</view>
					</view>
					<view class="order_left_txt_box flex">
						<view class="left_title">我的返利</view>
						<view class="left_name_txt" style="color: #ff3f4a">¥{{ item.money }}（{{ item.rebate_status }}）</view>
					</view>
				</view>
				<view class="order_left_box">
					<view class="order_left_txt_box flex">
						<view class="left_title">联系方式</view>
						<view class="left_name_txt">
							{{ item.mobile.replace(/(\d{3})(\d{4})(\d{4})/, '$1 $2 $3') }}
						</view>
					</view>
					<view class="order_left_txt_box flex">
						<view class="left_title">成交金额</view>
						<view class="left_name_txt">¥{{ item.pay.actual_payment }}</view>
					</view>
					<view class="order_left_txt_box flex">
						<view class="left_title">推荐人</view>
						<view class="left_name_txt">
							{{ item.referrer || '暂无' }}
						</view>
					</view>
					<view class="order_left_txt_box flex">
						<view class="left_title">订单状态</view>
						<view class="left_name_txt" style="color: #ff3f4a">
							{{ item.order_state_text }}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			keyword: '',
			startDate: '',
			endDate: '',
			rebateList: [],
			page: 1
		};
	},
	onLoad() {
		this.getList();
	},
	filters: {
		handleOrderStatus(val) {},
		handleStatus(val) {
			if (val == 'init') {
				return '待发放';
			}
			if (val == 'issue') {
				return '可提现';
			}
			if (val == 'finish') {
				return '提现完成';
			}
			if (val == 'fail') {
				return '失败';
			}
		}
	},
	onReachBottom() {
		this.page++;
		this.getList();
	},
	methods: {
		getList() {
			uni.showLoading({
				title: '数据请求中···'
			});
			this.$request({
				url: 'rebate/detail',
				method: 'POST',
				data: {
					start: this.startDate,
					end: this.endDate,
					keyword: this.keyword,
					page: this.page
				}
			}).then((res) => {
				if (res.data.code == 1) {
					this.rebateList = res.data.data;
				}
				uni.hideLoading();
			});
		},
		change(e) {
			this.startDate = e;
		},
		// 选择结束日期
		change1(e) {
			this.endDate = e;
		},
		callPhone(data) {
			uni.makePhoneCall({
				phoneNumber: data
			});
		}
	}
};
</script>

<style scoped lang="scss">
.recommend_box {
	padding-bottom: 50upx;

	.list_box {
		height: 462upx;
		background-color: #fff;
		margin-top: 16upx;
		padding: 20rpx 32rpx 32rpx 32rpx;
		box-sizing: border-box;

		.order_detail_box {
			margin-top: 20upx;

			.order_left_box {
				width: 58%;
				&:nth-of-type(even) {
					width: 42%;
				}
				.order_left_txt_box {
					margin-bottom: 20upx;
					.left_title {
						width: 96rpx;
						white-space: nowrap;
						text-align: justify;
						text-align-last: justify;
						font-weight: 500;
						font-size: 24rpx;
						color: #888;
					}

					.left_name_txt {
						font-weight: 400;
						font-size: 24rpx;
						white-space: nowrap;
						color: #333;
						margin-left: 20upx;
					}
				}
			}
		}

		.shop_box_detail {
			margin-top: 24upx;

			.left_title_name {
				.shop_title_txt {
					width: 96rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #888888;
				}

				.shop_name_txt {
					font-family: PingFang-SC, PingFang-SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #333333;
					margin-left: 22upx;
				}
			}

			.right_phone_icon {
				width: 40upx;
				height: 40upx;
			}
		}

		.head_goods_detail {
			padding-bottom: 20upx;
			border-bottom: 2upx solid #f4f4f4;

			.left_img_box {
				width: 116upx;
				height: 116upx;
				background-color: #666666;
				border-radius: 8upx;
			}

			.center_goods_name {
				width: 356upx;
				height: 88upx;
				margin-top: 22upx;
				margin-left: 26upx;
				line-height: 44upx;
				overflow: hidden;
				display: -webkit-box;
				text-overflow: ellipsis;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			.goods_price {
				margin-top: 22upx;
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				.top_price {
					color: #333333;
					text-align: center;
				}
				.bot_number {
					color: #666666;
					margin-top: 10upx;
					text-align: center;
				}
			}
		}
	}

	.header_share {
		height: 94upx;
		background: #ffffff;
		overflow: hidden;

		.uni_ipt {
			width: 460upx;
			height: 68upx;
			background: #f3f3f3;
			border-radius: 8upx 8upx 8upx 8upx;
			margin-left: 32upx;
			margin-top: 12upx;
			padding-left: 78upx;
		}

		.search_img {
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			left: 50rpx;
			margin-top: 28rpx;
		}

		.search_btn {
			width: 116upx;
			height: 68upx;
			background: #e0a76d;
			border-radius: 34upx 34upx 34upx 34upx;
			line-height: 68upx;
			color: #ffffff;
			margin-top: 10upx;
			margin-left: 32upx;
		}
	}

	.head_riqi_box {
		height: 94upx;
		background: #ffffff;

		/deep/ .uni-date {
			width: 290upx;
			height: 50upx;
			background: #f3f3f3;
			border-radius: 58upx 58upx 58upx 58upx;
		}

		/deep/ .uni-date-x--border {
			border: none !important;
		}

		/deep/ .uni-date-x {
			margin-top: 6upx;
		}

		.zhi_txt {
			color: #999999;
			line-height: 94upx;
		}

		.shaixuan_btn {
			width: 104upx;
			height: 50upx;
			background: #666666;
			border-radius: 25upx 25upx 25upx 25upx;
			line-height: 50upx;
			color: #ffffff;
			margin-top: 18upx;
			margin-left: 6upx;
		}
	}
}
</style>
<style>
page {
	background-color: #f4f4f4;
}
</style>
